Fundamentos de HTML

Hola, estoy creando este post para registrar mis estudios en HTML, reforzar mis conocimientos y compartirlos con quienes puedan encontrarlo útil.

Soy un programador con varios años de experiencia. En nuestra carrera, contamos con un vasto mundo de tecnologías que facilitan nuestro trabajo. Sin embargo, no es posible ni saludable saberlo todo. Con el tiempo, tendemos a especializarnos en áreas específicas, complementándonos entre colegas al compartir conocimientos técnicos.

Recientemente, me cuestioné si mi conocimiento en programación era el adecuado. Decidí revisitar todo desde cero, puliendo las bases de lo que sé, y comencé con lo más básico: HTML.

Para mi sorpresa, descubrí aspectos interesantes que no conocía y formas más modernas de realizar tareas comunes. Me enfoqué en aplicar buenas prácticas semánticas y de accesibilidad para comprender naturalmente todos los conceptos que rodean a HTML.

Por eso he decidido crear este post en mi sitio web, para compartir estos conocimientos. Si ya sabes HTML, esto te ayudará a fortalecer tus habilidades. Y si eres nuevo y quieres aprender, estoy seguro de que este post te proporcionará una guía clara y directa.

¿Que es HTML?

Esta tecnología es el lenguaje estándar que utilizan todos los navegadores web para interpretar la estructura y el contenido de la web mediante un sistema de etiquetas.

Cuando cargas un sitio web, el navegador procesa un archivo HTML previamente construido por el programador. Este archivo contiene una jerarquía de etiquetas HTML que especifican qué representa cada elemento, como textos, imágenes, listas, tablas y secciones. Así, sin importar qué navegador esté utilizando la persona, este interpreta la información para que sea visible y comprensible para el usuario.

Existe algo llamado HTML Semántico que es de suma importancia, ya que nos permite indicar el significado del contenido dentro de nuestros sitios web. Esto ayuda tanto a los navegadores como a los motores de búsqueda a entender mejor la estructura y propósito de cada elemento.

Una mala practica que podemos encontrar entre desarrolladores es que crean todo con una sola etiqueta y me refiero a la famosa etiqueta DIV (Etiqueta que hace referencia a las cajas).

Si un día revisas un archivo de una página y ves que todo está escrito usando solo divs, podrías concluir que ese desarrollador quizá no comprende bien las bases del HTML. Usar correctamente etiquetas semánticas refleja un mejor dominio de la estructura y funcionalidad del código.

¿Por qué es importante aprender esto, te preguntarás? La respuesta radica en que, como programador, cuando necesitas crear un sitio web y asegurar un buen posicionamiento en motores de búsqueda como Google, es crucial utilizar HTML semántico. Estos motores de búsqueda emplean HTML semántico para identificar las distintas zonas de tu sitio, comprender su contenido y así poder indexarlo correctamente en sus resultados. Además, al seguir estas normas, aseguramos una buena accesibilidad web, lo que garantiza que nuestros sitios sean accesibles para personas con discapacidades, ofreciendo así una mejor experiencia de usuario.

Además, si trabajas en equipo, usar HTML semántico facilita la colaboración, ya que permite a los colegas identificar de manera más eficiente los contenidos que necesitan modificaciones. Evitar que todo sea un simple DIV hace que el código sea más claro y comprensible para todos los miembros del equipo

Tipos de Paginas:

En HTML podemos crear dos tipos de paginas, tenemos las paginas que son estaticas y tenemos las paginas que son dinamicas. Es importante que comprendas que las dos son sumamente importantes porque con ellas podemos cubrir ciertas necesidades y si hoy en dia en la actualidad, no importante en que fecha estes leyendo esto, todos dependemos mucho de HTML mas de lo que crees, te explico por que:

Pagina estatica:

Una página estática, comúnmente conocida como “página web” o “landing page”, se caracteriza porque su contenido no cambia; siempre es el mismo cada vez que se consulta. Este tipo de página se utiliza por las empresas para mostrar información sobre sí mismas, detalles de sus productos y mensajes que desean comunicar al mundo.

Técnicamente, estas páginas no están conectadas a una base de datos ni a un servidor, y no permiten cambios en su contenido, ni suelen incluir funciones como el inicio de sesión. En resumen, la información en estas páginas persiste y permanece inalterada cada vez que se accede a ellas en la web.

Pagina Dinamica:

En cambio, una página dinámica es considerada una aplicación, ya que está conectada a una base de datos y podemos interactuar con ella. Por ejemplo, Instagram es una aplicación web, porque cada vez que accedemos, su información es siempre diferente.

En conclusión, ambos tipos de páginas son importantes porque cumplen con propósitos distintos. Es crucial conocerlas para elegir la opción más adecuada según las necesidades del cliente y el tipo de problema que se desee resolver.

Estructura y Anatomia de un Archivo HTML Basico

Un archivo base de html se mira de la siguiente manera:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

A continuación, te explicaré detalladamente cada etiqueta de esta base:

1. Doctype: Indica que el documento es un archivo HTML. Es esencial para que el navegador interprete correctamente el contenido.

2. Etiqueta HTML: Es el contenedor principal del documento. Tiene un atributo que indica el idioma de la página, lo cual es muy importante porque le informa al navegador en qué idioma está escrita la página, permitiendo al usuario traducirla automáticamente a su idioma nativo si es necesario.

3. Etiqueta Head: Encapsula información sobre el documento que no se muestra directamente en la página. Se utiliza para incluir metadatos, enlaces a estilos y scripts, y configuraciones del navegador.

4. Etiqueta Charset (charset=“UTF-8”): Indica al navegador que debe interpretar caracteres especiales del idioma, como la ‘ñ’ en español.

5. Meta Name=“Description”: Ofrece una breve descripción del contenido de la página, lo cual es útil para la optimización en motores de búsqueda (SEO).

6. Meta Name=“Robots”: Controla cómo los motores de búsqueda indexan la página, por ejemplo, con valores como “index, follow”.

7. Atributo Title: Especifica el título del documento, que aparece en la pestaña del navegador y es importante para el SEO.

8. Meta Name=“Viewport”: Configura la escala y el ancho del contenido para la visualización en dispositivos móviles.

9. Atributo Link: Se utiliza para relacionar el documento con recursos externos, como hojas de estilo CSS.

Es importante mencionar que existen etiquetas que deben abrirse y cerrarse, y otras que se autoceran, como: <meta> y <link>.

Anatomia de un sitio web

Un sitio web generalmente comparte ciertas etiquetas en su estructura, como:

Header: Es la sección superior del sitio, donde suelen estar el logo, el menú de navegación y algunas veces elementos de contacto o búsqueda. Es crucial para la identidad visual y la navegación del usuario.

Contenedor Principal: Es la sección que encapsula el contenido principal de la página. Aquí se muestra la información más relevante, como textos, imágenes y videos.

Sidebar: Es una barra lateral que puede contener menús adicionales, enlaces a secciones relacionadas, widgets o anuncios. A menudo se utiliza para información complementaria.

Footer: Se encuentra al final del sitio e incluye información como derechos de autor, enlaces a políticas de privacidad, y otras informaciones o enlaces secundarios.

Aunque no todos los sitios web utilizan esta estructura exactamente, conocer estas etiquetas es importante para diferenciar y planificar adecuadamente las secciones de un sitio web. Puedes buscar imágenes sobre estas estructuras en Google usando términos como “HTML Layouts”.

Anatomia de una etiqueta HTML

Antes de explorar más a fondo las etiquetas disponibles en HTML, es importante entender su anatomía.

En la imagen, vemos una etiqueta de ancla (<a>), que es solo una de las muchas etiquetas que podemos usar en HTML. La función de esta etiqueta es agregar texto que enlaza a sitios web. Aquí te detallo la estructura común de las etiquetas HTML:

1. Elemento Completo: La etiqueta entera, desde la apertura hasta el cierre. <a href="https://www.google.com/">Visitar Google</a>

2. Atributos: Son partes de la etiqueta que proporcionan información adicional. En este ejemplo, href es un atributo que define el enlace.

3. Apertura y Cierre: La mayoría de las etiquetas tienen una apertura (<a>) y un cierre (</a>).

4. Contenido: Es el texto o elementos que se encuentran entre la apertura y cierre de la etiqueta. En este caso, Visitar Google

Cada etiqueta tiene sus propios atributos y acepta contenidos específicos, pero todas comparten esta anatomía básica.

Etiquetas HTML: Contenedoras y de contenido

Como comentamos las etiquetas en html, son componentes fundamentales que como ya lo mencionamos, nos ayudan a definir la estructura y el contenido de una pagina web. cada etiqueta delimita el inicio y el fin de un elemento, y por lo tanto se escriben entre corchetes angulares <>. Hay etiquetas de apertura y de cierre, siendo las de cierre iguals las de aperuta con una barra inclinada </>. antes del nombre de la etiqueta. Por ejemplo:

<p>Esto es un párrafo.</p>

En HTML, las categorías de etiquetas son:

• Prólogo y Elemento Raíz: Configuran la base del documento.
• Metadatos: Proporcionan información sobre el documento.
• Secciones: Definen distintas partes del contenido.
• Bloques de Contenido: Delimitan áreas de contenido general.
• Texto (en línea): Incluyen elementos textuales inline.
• Modificaciones: Indican cambios en el documento.
• Contenido Incrustado: Para medios como imágenes y videos.
• Listas (Bloque de contenido): Organizan elementos listados.
• Tablas: Estructuran datos en formato tabular.
• Formularios: Recogen entradas del usuario.
• Elementos Interactivos: Para interacción con el usuario.
• Scripts: Añaden funcionalidad y comportamiento.
• Para una lista completa de etiquetas en cada categoría, te recomiendo visitar páginas de referencia como MDN Web Docs o visita:

https://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html

Existen diferentes tipos de etiquetas en HTML que nos permiten estructurar y dar contenido a nuestras páginas web:

Etiquetas Contenedoras

Estas etiquetas definen la estructura de la página y suelen incluir otras etiquetas dentro de ellas:

• body: Delimita el cuerpo del documento.
• article: Define un artículo.
• section: Representa una sección del documento.
• nav: Contiene los enlaces de navegación.
• aside: Define contenido lateral.
• h1 a h6: Encabezados de nivel 1 a 6.
• hgroup: Grupo de encabezados.
• header: Cabecera de la página.
• footer: Pie de página.
• address: Información del autor.

Estas etiquetas no son visibles por sí solas en el navegador, pero se pueden estilizar con CSS para definir la apariencia y disposición del contenido.

Etiquetas de Contenido

Estas son las etiquetas que muestran el contenido visible:

• p: Párrafo.
• hr: Separador horizontal.
• div: División general de contenido.
• blockquote: Cita larga, que incluye varios párrafos.
• pre: Texto preformateado.
• main: Contenido principal.
• figure: Ilustración.
• figcaption: Pie de ilustración.

Estas etiquetas son visibles en el navegador y su apariencia se puede personalizar con CSS.

Estructura Semántica

• Header: Se utiliza para definir un encabezado de página.
• Nav: Integra una barra de navegación.
• Main: Contiene el contenido principal.
• Article: Define artículos independientes.
• Footer: Incluye el pie de página.
• Listas
• ul: Lista desordenada.
• ol: Lista ordenada.
• li: Elemento de lista.

Estas etiquetas, aunque no muestran contenido visible por sí solas, forman la estructura semántica del HTML, lo que es crucial para el diseño y accesibilidad del proyecto.

• Encabezados y Enlaces
• p: Para párrafos.
• h1 a h6: Para títulos.
• a: Crea hipervínculos.

Buenas Prácticas

Evitar el uso excesivo de divs es importante para una estructura clara y comprensible. Aprender HTML semántico permite un diseño más significativo y accesible.

En este punto si quieres practicar este contenido, puedes crear una lista de compras de supermercado con puro contenido HTML

Formatos de Imagenes y Su Uso en el Desarrollo web

Algo muy interesante que a menudo se pasa por alto es el uso de las imágenes en la web. Las imágenes, como las conocemos, tienen sus formatos específicos, pero no es recomendable emplear cualquier formato en nuestros sitios porque algunos son muy pesados.

Si usamos formatos de imagen pesados, nuestras páginas cargarán muy lentamente y eso afectará la experiencia del usuario.

Un concepto importante aquí es “lossless”. Esto se refiere a imágenes que no pierden calidad al comprimirse, lo cual es crucial para mantenerlas visualmente impactantes sin que pesen demasiado.

Formatos de Imágenes

Sin Pérdida (Lossless):

1. GIF: Utiliza solo 256 colores, lo que las hace muy ligeras. Son perfectas para gráficos simples y animaciones cortas.
2. PNG 8: También limitado a 256 colores, ideal para logotipos y gráficos con fondos transparentes.
3. PNG 24: Soporta una gama ilimitada de colores y fondos transparentes de alta calidad.
4. SVG: Es un formato vectorial y extremadamente ligero, perfecto para íconos o logotipos que necesitan escalarse sin perder calidad.

Con Pérdida (Lossy):

1. JPG/JPEG: Ideales para fotos, ya que pueden comprimirse para que pesen menos, aunque a veces pierdan un poco de calidad.

Al final, la idea es elegir formatos que aseguren una carga rápida de la página. Las imágenes con pérdida son más pequeñas y ayudan a que el navegador las cargue más rápido. Así que, al desarrollar un sitio web, es clave preferir imágenes optimizadas para garantizar una buena experiencia al usuario.

Optimizacion de imagenes en la web

Cuando trabajamos con imágenes en la web, es fundamental evitar aquellas que no pierden calidad solo si son excesivamente grandes. El tamaño óptimo para una imagen web es aproximadamente de 70 KB. Imágenes que pesan más de 3 MB definitivamente deben evitarse.

Opciones para Optimizar Imágenes

1. Comprimir Imágenes: Puedes usar herramientas como TinyPNG que ayudan a reducir el tamaño de las imágenes sin comprometer demasiado la calidad.

2. Remover Metadatos: Las cámaras suelen agregar metadatos a las fotos, lo que puede incrementar su tamaño. Puedes usar sitios como Verexif para eliminar esta información y hacer que las imágenes sean más ligeras.

Optimizando las imágenes de esta manera, mejorarás significativamente la velocidad de carga de tu sitio web y, en consecuencia, la experiencia del usuario.

Uso de etiquetas img y figure

Cuando trabajamos con imágenes en HTML, es importante usar las etiquetas correctas para mejorar tanto la accesibilidad como la claridad del contenido. Una excelente práctica es usar <figure> como contenedor de las imágenes y <figcaption> para su descripción.

OJO una mala practica es usar solamente la etiqueta de imagen.

¿Por qué hacerlo así? Porque ayuda tanto a los navegadores como a los usuarios a entender mejor la relación entre una imagen y su texto asociado.

Aquí te dejo un ejemplo sencillo:

    <figure>
      <img src="imagen-ejemplo.jpg" alt="Descripción de la imagen">
      <figcaption>Descripción de la imagen aquí.</figcaption>
    </figure>

Y si tienes varias fotos:

    <figure>
      <img src="foto1.jpg" alt="Primera foto">
      <img src="foto2.jpg" alt="Segunda foto">
      <figcaption>Fotos de nuestro último viaje.</figcaption>
    </figure>

Usar <figure> y <figcaption> no solo organiza mejor el contenido contenido, sino que también mejora la experiencia del usuario en la web.

Etiqueta de Video

La etiqueta <video> es esencial para incorporar videos en nuestros sitios web de manera eficiente y accesible. Los videos enriquecen el contenido y pueden mejorar significativamente la experiencia del usuario, siempre y cuando se utilicen adecuadamente.

Cuando añadimos un video desde nuestra computadora, podemos hacerlo de la siguiente manera:

    <video src="video.mp4" controls preload="auto"></video>

Explicación rápida:

• controls: Agrega botones para reproducir, pausar y ajustar el volumen del video, facilitando la interacción del usuario.

• preload=“auto”: Permite que el video comience a descargarse automáticamente al cargar la página, haciendo que esté listo para reproducirse cuando el usuario lo decida.

Es importante recordar que iniciar videos de forma automática está mal visto por los navegadores y se considera una práctica desaconsejada.

Marcar tiempos en el video:

Si deseas que el video comience y termine en momentos específicos, puedes hacerlo así:

src="video.mp4#t=10,60"

Múltiples fuentes de video: También puedes utilizar <source> dentro de <video> para incluir diferentes formatos y asegurar la compatibilidad con todos los navegadores:

    <video controls>
      <source src="video.mp4" type="video/mp4">
      <source src="video.webm" type="video/webm">
      Tu navegador no soporta este formato de video.
    </video>

Con estas prácticas, puedes integrar videos de manera efectiva, asegurando una experiencia fluida y agradable para los usuarios.

Forma Ideal para Crear un Formulario

Cuando diseñamos formularios en HTML, es crucial utilizar las etiquetas correctas para asegurar funcionalidad y accesibilidad. Aquí te explico cómo hacerlo de manera óptima.

Estructura Básica del Formulario

Comencemos con la etiqueta <form>, que es semántica y le indica al navegador dónde está nuestro formulario. El atributo action es importante, ya que ahí se especifica la URL del endpoint donde se enviarán los datos.

Para relacionar adecuadamente los campos con sus etiquetas, el label debe coincidir con el id del input. Así es como se hace correctamente:

<form action="tu-endpoint-url">
    <label for="nombre">Nombre</label>
    <span>¿Cuál es tu nombre?</span>
    <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre">
</form>

Formularios con Campos de Fecha y Hora

Para incluir campos que manejen fecha y hora, podemos usar input con tipo datetime-local:

<form>
    <label for="calendario">Calendario</label>
    <input type="datetime-local" id="calendario" name="calendario">
</form>

Autocompletado y Requerimientos

Para facilitar que los usuarios completen formularios, podemos usar el atributo autocomplete en los input. Esto permite al navegador llenar automáticamente los campos con respuestas previas del usuario.

<input type="datetime-local" id="calendario" name="calendario" autocomplete="date">

Uso de la Etiqueta <select>

Una buena práctica para listas desplegables es usar <datalist>, que proporciona un select con un filtro, permitiendo al usuario ingresar su opción.

<input list="cursos">
<datalist id="cursos">
    <option value="Curso 1"></option>
    <option value="Curso 2"></option>
    <option value="Curso 3"></option>
</datalist>

Esta es la mejor manera de permitir selecciones mientras ofreces flexibilidad al usuario para ingresar directamente su elección.

Utilizar estas prácticas asegurará que tus formularios sean eficientes, fáciles de usar y estén preparados para obtener los datos de manera correcta.

Diferencias entre Input Type Submit y Button

Al trabajar con formularios en HTML, es común encontrar tanto input de tipo submit como la etiqueta button. Aunque pueden parecer similares, hay algunas diferencias clave:

<input type="submit">

• Utilizado específicamente para enviar formularios.
• Se limita únicamente a esta función dentro de un formulario.

<button type="submit">Enviar</button>

• Es más flexible y se puede usar en múltiples contextos, no solo en el envío de formularios.
• Permite incluir contenido adicional, como texto o imágenes, dentro del botón.

Ambas opciones pueden enviar un formulario al servidor, pero el button ofrece más flexibilidad en cuanto a diseño y funcionalidad.

---

Lo que sigue ahora es conocer como trabajar con el diseño responsivo, continua dando click en este mismo texto

Y por ultimo: Conoce mas acerca lo importante que es el utilizar html semantico para mejorar la acessibilidad web

Y bueno con esto llegamos al final de este recorrido por las prácticas óptimas en HTML. Desde la creación de formularios eficientes y el uso correcto de imágenes, hasta el manejo de etiquetas multimedia, espero que esta información te sea útil para mejorar tus proyectos web. Recuerda siempre aplicar el HTML semántico y optimizar tus recursos para ofrecer la mejor experiencia posible.